<template>
  <v-container fluid fill-height class="statistics-wrapper">
    <v-layout row wrap>
      <v-flex md12>
        <v-tabs v-model="tabs" fixed-tabs color="transparent" slot="extension" @input="getGameClicked">
          <v-tabs-slider color="primary"></v-tabs-slider>
          <v-tab v-for="(item, index) in toggleItems" :key="index" :href="`#${item.value}`" class="primary--text">
            <span class="title">{{ item.text }}</span>
          </v-tab>
        </v-tabs>
      </v-flex>
      <v-flex md12>
        <v-layout row wrap>
          <v-flex md2 sm1 class="px-1 my-4 ">
          <v-card dark color="red" class="px-4">
            <v-card-title class="px-0 title">今天</v-card-title>
            <v-card-text class="px-0 subheading">
              <v-flex md12 d-flex justify-content-between>
                <span>总开:166间房</span> 
                <span>有效:152间房</span> 
              </v-flex>
            </v-card-text>
          </v-card>
        </v-flex>
        <v-flex md2 class="px-1 my-4 ">
          <v-card dark color="blue" class="px-4">
            <v-card-title class="px-0 title">昨天</v-card-title>
            <v-card-text class="px-0 subheading">
              <v-flex md12 d-flex justify-content-between>
                <span>总开:166间房</span> 
                <span>有效:152间房</span> 
              </v-flex>
            </v-card-text>
          </v-card>
        </v-flex>
        <v-flex md2 class="px-1 my-4 ">
          <v-card dark color="green" class="px-4">
            <v-card-title class="px-0 title">本周</v-card-title>
            <v-card-text class="px-0 subheading">
              <v-flex md12 d-flex justify-content-between>
                <span>总开:166间房</span> 
                <span>有效:152间房</span> 
              </v-flex>
            </v-card-text>
          </v-card>
        </v-flex>
        <v-flex md2 class="px-1 my-4 ">
          <v-card dark color="orange" class="px-4">
            <v-card-title class="px-0 title">上周</v-card-title>
            <v-card-text class="px-0 subheading">
              <v-flex md12 d-flex justify-content-between>
                <span>总开:166间房</span> 
                <span>有效:152间房</span> 
              </v-flex>
            </v-card-text>
          </v-card>
        </v-flex>
        <v-flex md2 class="px-1 my-4 ">
          <v-card dark color="indigo" class="px-4">
            <v-card-title class="px-0 title">本月</v-card-title>
            <v-card-text class="px-0 subheading">
              <v-flex md12 d-flex justify-content-between>
                <span>总开:166间房</span> 
                <span>有效:152间房</span> 
              </v-flex>
            </v-card-text>
          </v-card>
        </v-flex>
        <v-flex md2 class="px-1 my-4 ">
          <v-card dark color="grey darken-2" class="px-4">
            <v-card-title class="px-0 title">上月</v-card-title>
            <v-card-text class="px-0 subheading">
              <v-flex md12 d-flex justify-content-between>
                <span>总开:166间房</span> 
                <span>有效:152间房</span> 
              </v-flex>
            </v-card-text>
          </v-card>
        </v-flex>
        </v-layout>
        
      </v-flex>
      <v-flex md12>
        <v-layout row wrap>
          <v-flex d-flex md12>
            <v-layout row wrap>
              <v-flex row>
                <!-- 各项曲线图 -->
                <div id="echart-wrapper" style="width: 600px;height:400px;">

                </div>
              </v-flex>
            </v-layout>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
    <v-dialog fullscreen hide-overlay transition="dialog-bottom-transition" v-model="dialog">
      <v-card>
        <v-toolbar card dark color="grey darken-4">
          <v-toolbar-title>
            <v-icon>assignment_ind</v-icon> 房间详情</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn icon @click.native="dialog = false" dark>
            <v-icon>close</v-icon>
          </v-btn>
        </v-toolbar>
        <!-- 显示房间详细信息 -->
        <v-card-title>
          <v-avatar>
            <v-icon>wc</v-icon>
          </v-avatar>
          <span class="headline">房间号</span>
          <span>玩法</span>
          <v-btn @click="dismissRoom" class="title" prepend-icon="block" large dark round color="blue darken-2">解散房间</v-btn>
        </v-card-title>
        <v-card-text>
          <v-container fluid grid-list-xl>
            <!-- 玩过的游戏统计 -->
            <v-layout row justify-space-between>
              <v-flex md12>
                <v-card>
                  <v-data-table :loading="showProgress" :headers="detailHeaders" :items="detailData" hide-actions class="elevation-1">
                    <v-progress-linear slot="progress"  color="teal" height="5"  indeterminate></v-progress-linear>
                    <template slot="items" slot-scope="props">
                      <td class="text-xs-left subheading">{{ props.item.headUrl }}</td>
                      <td class="text-xs-left subheading">{{ props.item.lftid }}</td>
                      <td class="text-xs-left subheading">{{ props.item.nickname }}</td>
                      <td class="text-xs-left layout px-0">
                        <v-btn depressed round dark color="red" class="mx-1" @click="deletePlayer(props.item)">
                          <span class="mx-1">移除</span>
                          <v-icon color="white">delete_forever</v-icon>
                        </v-btn>
                      </td>
                    </template>
                    <!-- 表格分页 -->
                    <template slot="pageText" slot-scope="props">
                      {{ props.pageStart }} - {{ props.pageStop }} de {{ props.itemsLength }}
                    </template>
                    <!-- 没有数据时显示的提示 -->
                    <template slot="no-data">
                      <div class="text-md-center">
                          <v-icon color="yellow darken-3">warning</v-icon>
                          <span class="subheading">暂无数据</span> 
                        </div>
                    </template>
                  </v-data-table>
                </v-card>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>
      </v-card>
      <v-dialog v-model="modal" persistent max-width="290">
        <v-card>
          <v-card-title class="headline">注意!</v-card-title>
          <v-card-text class="title">{{modalText}}</v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="red darken-1" flat @click.native="modal = false">取消</v-btn>
            <v-btn color="green darken-1" flat @click.native="modal = false">确认</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-dialog>
  </v-container>
</template>

<script>
import echarts from 'echarts'
export default {
  data: () => ({
    username: "",
    password: "",
    showPwd: false,
    tabs: null,
    btnToggle: null,
    showProgress: false,
    dialog: false,
    modal: false,
    modalText: '',
    toggleItems: [
      { text: "新增玩家", value: 1 },
      { text: "活跃用户", value: 2 },
      { text: "充值记录", value: 3 },
      { text: "代理数据", value: 4 },
    ],
     headers: [
      { text: "房间号", value: "roomNo", align: "left" },
      { text: "人数", value: "pcount", align: "left" },
      { text: "玩法", value: "method", align: "left" },
      { text: "状态", value: "status", align: "left" },
      { text: "操作", value: "actions", align: "left" },
    ],
    detailHeaders:[
      { text: "头像", value: "pcount", align: "left" },
      { text: "ID", value: "method", align: "left" },
      { text: "昵称", value: "status", align: "left" },
      { text: "操作", value: "actions", align: "left" },
    ],
    tableData: [],
    detailData: []
  }),
  mounted() {
    // 获取到对应的游戏类型
    console.log(this.$route.params);
    this.initialize()
    let chart = echarts.init(document.getElementById('echart-wrapper'))
    chart.setOption({
      title: {
        text: '新增用户'
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
    })
  },
  watch:{
    // 监测路由参数变化
    '$route' (to, from){
      console.log(to.params.gametype)
    }
    },
  methods: {
    getGameClicked() {
      console.log(this.tabs)
    },
    initialize() {
      this.tableData = [
        {
          roomNo: "100106",
          pcount: 159,
          lftid: 6.0,
          method: '扎鸟',
          status: 4.0,
        },
        {
          roomNo: "198964",
          pcount: 237,
          lftid: 9.0,
          method: 37,
          status: 4.3,
        }
      ];
      this.detailData = [
        {
          headUrl: "Frozen Yogurt",
          lftid: 159,
          nickname: 24
        }
      ]
    },
    roomDetails(item) {
      this.dialog = true
    },
    deletePlayer(item) {
      this.modal = true
      this.modalText = '确认移除该玩家吗?'
    },
    dismissRoom() {
      this.modal = true
      this.modalText = '确认解散该房间吗?'
    }
  }
}
</script>

<style lang="less" scoped>

</style>


